<template>
<!--
  在组件标签身上通过@绑定的事件 默认都会被识别为自定义事件， 都需要通过 $emit 触发
  在普通的元素身上通过 @绑定的事件 叫做浏览器原生事件 不会被识别为自定义事件， 需要鼠标点击
  .native 修饰符可以将浏览器原生事件转为自定义事件
-->
  <button :class="className" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'SfButton',
  props: {
    size: {
      type: String,
      default: 'min'
    }
  },
  data() {
    return {}
  },
  computed: {
    className() {
      console.log('========= button  =========', this.size)
      return this.size
    }
  },
  methods: {
    handleClick() {
      console.log('button clicked')
      this.$emit('click')
    }
  }

}
</script>
<style scoped lang="scss">

.min{
  padding: 20px
}

.large{
  padding: 50px
}
</style>
